<template>
    <div>
        <div ref="Pie" id="pie" class="pie" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts';
const props = defineProps({
    chartData: {
        type: Object,
        default: false
    }
});
watch(() => props.chartData, async val => {
    if (val) {
        initChart()
    }
}, { deep: true })
let myChart: any = null
const resizeDom = ref()
const resizeEle = ref()

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    let option = {
        grid: {
            top: "10%",
            left: "2%",
            right: "0%",
            bottom: "5%",
            containLabel: true
        },
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(61, 85, 102, 0.2)",
            borderWidth: 1,
            borderColor: "#9DBAE1", // 边框颜色
            // 选中线颜色
            axisPointer: {
                lineStyle: {
                    color: "#9DBAE1"
                }
            },
            // 字体颜色
            textStyle: {
                color: "#000",
                fontSize: 10
            }
        },
        legend: {
            top: '0',
        },
        xAxis: [
            {
                type: "category",
                axisLabel: {
                    color: "#74739D",
                    fontSize: 14,
                },
                data: props.chartData.datas
            }
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                axisLabel: {
                    color: "#74739D",
                    fontSize: 14
                },
            }
        ],
        series: [
            // 上架商品
            {
                name: "上架商品",
                type: "line",
                // stack: '总量',
                smooth: true, // 是否平滑曲线显示
                symbolSize: 10,
                lineStyle: {
                    color: "#FFB960" // 线条颜色
                },
                itemStyle: {
                    normal: {
                        borderColor: '#FFB960', // 数据点边框颜色
                        borderWidth: 2, // 数据点边框宽度
                        color: '#FFB960' // 数据点填充颜色设置为透明
                    }
                },
                areaStyle: {
                    // 区域填充样式
                    color: '#FFF2E1'
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    //     [
                    //         { offset: 0, color: "rgba(255,194,14, 0.8)" },
                    //         { offset: 1, color: "rgba(255,194,14, 0)" }
                    //     ],
                    //     false
                    // )
                    // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
                    // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: props.chartData.listing
            },
            // 入库商品
            {
                name: "入库商品",
                type: "line",
                // stack: '总量',
                smooth: true, // 是否平滑曲线显示
                symbolSize: 10,
                lineStyle: {
                    color: "#539AFF" // 线条颜色
                },
                itemStyle: {
                    normal: {
                        borderColor: '#539AFF', // 数据点边框颜色
                        borderWidth: 2, // 数据点边框宽度
                        color: '#539AFF' // 数据点填充颜色设置为透明
                    }
                },
                areaStyle: {
                    color: '#DDEAFD'
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    //     [
                    //         { offset: 0, color: "rgba(0,242,239, 0.8)" },
                    //         { offset: 1, color: "rgba(216,216,216, 0)" }
                    //     ],
                    //     false
                    // )
                    // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
                    // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: props.chartData.warehousing
            },
            // 主播选品
            {
                name: "主播选品",
                type: "line",
                // stack: '总量',
                smooth: true, // 是否平滑曲线显示
                symbolSize: 10,
                lineStyle: {
                    color: "#FF6371" // 线条颜色
                },
                itemStyle: {
                    normal: {
                        borderColor: '#FF6371', // 数据点边框颜色
                        borderWidth: 2, // 数据点边框宽度
                        color: '#FF6371' // 数据点填充颜色设置为透明
                    }
                },
                areaStyle: {
                    color: '#D8C0C7'
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                    //     [
                    //         { offset: 0, color: "rgba(0,242,239, 0.8)" },
                    //         { offset: 1, color: "rgba(216,216,216, 0)" }
                    //     ],
                    //     false
                    // )
                    // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
                    // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: props.chartData.selections
            }
        ]
    };
    option && myChart.setOption(option);
}

window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
    resizeDom.value = document.getElementById('pie')
    resizeEle.value = new ResizeObserver((entries) => {
        myChart.resize()
    })
    resizeEle.value.observe(resizeDom.value as HTMLElement)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    resizeEle.value.disconnect(resizeDom.value)
})
</script>

<style scoped lang="scss">
.pie {
    width: 100%;
    height: 100%;
}
</style>